<template>
  <el-dialog v-model="props.visible" :title="title" align-center @close="closed()">
    <el-form ref="formRef" :model="models" :rules="rules" :label-width="formLabelWidth" :size="formSize" status-icon>
      <template v-for="item in items" :key="item.label">
        <el-form-item :label="item.label" :prop="item.prop">
          <component :is="item.type" v-model="models[item.prop]" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="props.close()">取消</el-button>
        <el-button type="primary" @click="props.submit(formRef, models)"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const formRef = ref()
const formLabelWidth = '140px'
const formSize = ref('default')

const props = defineProps({
  visible: {
    type: Boolean,
    deafult: false,
  },
  close: {
    type: Function,
    default: false,
  },
  submit: {
    type: Function,
    require: true,
  },
  title: {
    type: String,
    default: '添加',
  },
  rules: {
    type: Object,
    default: () => ({}),
  },
  models: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  items: {
    type: Array,
    default: () => [],
  },
})
console.log('props :>> ', props)
const closed = () => {
  props.close()
}
</script>

<style scoped></style>
